<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>study-more-test</title>
</head>
<style>
  /* 
    a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！
    a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。 
   */
  .fake-class-test {
    text-decoration: none;
  }

  .fake-class-test:link {
    color: black;
  }

  .fake-class-test:visited {
    color: red;
  }

  .fake-class-test:hover {
    color: aqua;
  }

  .fake-class-test:active {
    color: goldenrod;
  }

  .fake-p-test {
    color: black;
    display: none;
  }

  .fake-p-test-container:hover .fake-p-test {
    display: block;
  }

  .q-test{
    quotes: "[" "]";
  }

  .input-test:focus{
    background-color: cadetblue;
  }
</style>

<body>
  <div>
    <a href="http://www.baidu.com" class="fake-class-test">test</a>
    <div class="fake-p-test-container">鼠标悬停在这里，显示新内容
      <p class="fake-p-test">我又进来啦</p>
    </div>
    <div class="q-test">test</div>
    <input class="input-test" type="text">
    <input class="input-test" type="text">
  </div>
</body>

</html>